<template>
	<view class="order">
		<view class="miner-info bg-box flex-view">
			<view class="row">
				<view class="label text-dark">用户</view>
				<view class="value text-highlight">
					{{cutString(user.wallet_address,20)}}
				</view>
			</view>
			<view class="row">
				<view class="label text-dark">名称</view>
				<view class="value text-highlight">
					{{miner.name}}
				</view>
			</view>
			<view class="row">
				<view class="label text-dark">单台金额</view>
				<view class="value text-highlight">
					{{miner.price}}USDT<block v-if="miner.price_sid>0">+{{miner.price_sid}}SID</block>
				</view>
			</view>
			<view class="row">
				<view class="label text-dark">每日产量</view>
				<view class="value text-highlight">
					{{miner.day_amount}}SID
				</view>
			</view>
			<view class="row">
				<view class="label text-dark">合约周期</view>
				<view class="value text-highlight">
					{{miner.release_day}}天
				</view>
			</view>
			<view class="row">
				<view class="label text-dark">合约到期日</view>
				<view class="value text-highlight">
					{{calEndtime(miner.release_day)}}
				</view>
			</view>
			<view class="row">
				<view class="label text-dark">剩余数量</view>
				<view class="value text-highlight">
					{{miner.left_amount}}台
				</view>
			</view>
		</view>
		<view class="buy-amount">
			<view class="label">
				<view class="label-content">
					购买份额<view class="tag">{{buyMin}}~{{buyMax}}份</view>
				</view>

			</view>
			<view class="number-select-box">
				<uni-number-box :value="numberValue" @change="change" :min="buyMin" :max="buyMax" :step="1" />
			</view>

		</view>
		<view class="miner-info bg-box flex-view">
			<view class="info-title text-highlight">项目介绍</view>
			<view class="info-content">
				匿名链持续探索第三代区块链技术，以快速智能合约破除技术壁垒，以多维生态架构畅通市场交互，以全领域defi生态为突破口，为面临瓶颈阶段的公链提供可行性解决方案，去中心化的商业生态赋能，为实现真正匿名化道路开辟新的道路。
			</view>
		</view>
		<view class="confirm-submit flex-view">
			<view class="infomation">
				<view class="money">
					<view class="label">合计：</view>
					<view class="text-highlight">{{totalPrice}}USDT + {{totalSidPrice}}SID</view>

				</view>
				<view class="total-get">
					预计净产出： {{totalGetAmount}} SID
				</view>
				<view class="total-get">
					您的余额： {{balance}} USDT {{sid_balance}} SID
				</view>
			</view>
			<view class="submit">
				<view class="submit-btn" @click="confirmbuy">立即支付</view>
			</view>
		</view>
		<uni-popup id="dialogInput" ref="dialogInput" type="dialog">
			<uni-popup-dialog :password="true" mode="input" title="请输入钱包密码" value="" placeholder="请输入密码"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue'
	import api from "@/utils/api/pool/index.js"
	import util from '@/common/util.js'
	import timer from "@/common/timer.js"
	import calculateTool from "@/common/calculate-tool.js"
	export default {
		components: {
			uniNumberBox
		},
		data() {
			return {
				miner: {},
				numberValue: 1,
				buyMin: 0,
				buyMax: 0,
				user: {},
				totalPrice: 0,
				totalSidPrice: 0,
				totalGetAmount: 0,
				balance: 0,
				sid_balance: 0,
				password: "",
			}
		},
		onLoad(e) {
			this.miner = JSON.parse(e.data)

			this.user = uni.getStorageSync("user")
			console.log(this.user);
			//this.buyMin = this.miner;
			this.preBuyMiner();
			console.log("miner:", JSON.stringify(this.miner))
		},
		methods: {
			async preBuyMiner() {
				let post = {
					id: this.miner.id
				}
				let res = await api.preBuyMiner(post);
				if (res.status == 1) {
					this.buyMin = res.data.min;
					this.buyMax = res.data.max;
					this.balance = res.data.balance;
					this.sid_balance = res.data.sid_balance;
				}
			},
			cutString(str, len) {
				return util.cutString(str, len)
			},
			calEndtime(releaseDay) {
				let now = timer.timestamp();
				let endTimestamp = now + 86400 * releaseDay;
				return timer.date(endTimestamp)
			},
			prediction() {
				let price = this.miner.price;
				let sidPrice = this.miner.price_sid;
				let singleMinerRelease = calculateTool.mul(this.miner.release_day, this.miner.day_amount)
				this.totalPrice = calculateTool.mul(this.numberValue, price);
				this.totalSidPrice = calculateTool.mul(this.numberValue, sidPrice);
				this.totalGetAmount = calculateTool.mul(singleMinerRelease, this.numberValue);

			},
			change(value) {
				this.numberValue = value
				this.prediction();
			},
			async confirmbuy() {
				if (calculateTool.sub(this.balance, this.totalPrice) < 0) {
					let message = "您的USDT为" + this.balance + "；余额不足"
					util.showError(message);
					return;
				}
				if (calculateTool.sub(this.sid_balance, this.totalSidPrice) < 0) {
					let message = "您的SID为" + this.sid_balance + "；余额不足"
					util.showError(message);
					return;
				}
				if (calculateTool.sub(this.numberValue, 0) <= 0) {
					let message = "您填写的购买数量应该大于0"
					util.showError(message);
					return;
				}
				if (calculateTool.sub(this.numberValue, this.buyMax) > 0) {
					let message = "最多购买" + this.buyMax + "台"
					util.showError(message);
					return;
				}
				if (calculateTool.sub(this.numberValue, this.buyMin) < 0) {
					let message = "最少购买" + this.buyMin + "台"
					util.showError(message);
					return;
				}
				let post = {
					miner_id: this.miner.id,
					buy_amount: this.numberValue
				}
				this.$refs.dialogInput.open();

				// uni.reLaunch({
				// 	url: "../order/success-buy"
				// })
			},
			/**
			 * 输入对话框的确定事件
			 */
			async dialogInputConfirm(done, val) {
				// uni.showLoading({
				// 	title: '验证中'
				// })
				// console.log(val);
				this.password = val
				let checkPassword = util.checkItem("password", this.password)
				if (!checkPassword.status) {
					util.showError(checkPassword.message);
					return
				}
				let post = {
					miner_id: this.miner.id,
					buy_amount: this.numberValue,
					password: this.password
				};
				let res = await api.buyMiner(post)
				done()
				if (res.status == 1) {
					uni.reLaunch({
						url: "../order/success-buy?data=" + JSON.stringify(res.data)
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.buy-amount,
	.label,
	.number-select-box {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;

	}

	.buy-amount {
		margin: 15px;
		flex-direction: row;
		justify-content: space-between;
	}

	.buy-amount .label {
		justify-content: flex-end;

		.tag {
			color: #31E8D6;
			font-size: 12px;
		}

		.label-content,
		.label-content view {
			display: inline;
		}
	}

	.flex-view,
	.flex-view view {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}

	.miner-info {
		margin: 0 15px;
		border-radius: 12px;
		box-shadow: 0 0 15px rgba(0, 0, 0, .1);
		padding: 15px;

		.info-title {
			font-weight: bold;
		}

		.row {
			flex-direction: row;
			justify-content: space-between;
			margin-bottom: 5px;

			.label {}

			.value {
				font-weight: bold;
			}
		}
	}

	.confirm-submit {
		background-color: #000000;
		position: fixed;
		bottom: 0;
		width: 100%;
		flex-direction: row;
		justify-content: space-between;

		.infomation {
			padding: 10px 15px;

			.money {
				flex-direction: row;
				font-size: 14px;

				.text-highlight {
					font-weight: bold;
					font-size: 14px;
				}
			}

			.total-get {
				font-size: 12px;
				opacity: .5;
				line-height: 110%;
			}

		}

		.submit {
			background-color: #31E8D6;
			padding: 15px;
			justify-content: center;

			.submit-btn {
				font-weight: bold;
				font-size: 16px;
				color: #000000;
			}
		}
	}
</style>
